<html>
<head>
    <meta charset="utf-8">
    <title>{ms:global.name/}</title>
    <#include "head-file.htm" />
    <!--引入vue库-->
    <script type="text/javascript" src="/static/plugins/vue/2.6.9/vue.min.js"></script>
    <!--引入element-ui库-->

    <script src="${base}/static/plugins/element-ui/2.15.8/index.min.js"></script>
    <link rel="stylesheet" href="/static/plugins/element-ui/2.15.8/theme-chalk/index.min.css">

    <!--网络请求框架-->
    <script src="/static/plugins/axios/0.18.0/axios.min.js"></script>
    <script src="/static/plugins/qs/6.6.0/qs.min.js"></script>
    <script src="/static/plugins/ms/2.0/ms.umd.js"></script>
    <script src="/static/plugins/ms/2.0/ms-el-form.umd.js"></script>
    <script>
        window.ms.login="{ms:global.host/}mdiyPage/login.do";
        ms.base = "";
    </script>
</head>

<body>

<!--表单位置-start-->
<div id="app">
    <div class='login'>
        <el-form ref="form" :model="form" :rules="rules" label-position="right" size="large" label-width="130px">
            <el-form-item label="登录名" prop="peopleName">
                <el-input v-model="form.peopleName" :disabled="false" :readonly="false" :clearable="true"
                          placeholder="请输入登录名">
                </el-input>
            </el-form-item>
            <el-form-item label="登录密码" prop="peoplePassword">
                <el-input v-model="form.peoplePassword" :disabled="false" :readonly="false" :clearable="true"
                          type="password" placeholder="请输入登录密码">
                </el-input>
            </el-form-item>
            <el-row :gutter="0" justify="start" align="top">
                <el-col :span="12">
                    <el-form-item label="验证码" prop="rand_code">
                        <el-input v-model="form.rand_code" :disabled="false" :readonly="false" :clearable="true"
                                  placeholder="请输入验证码">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <div>
                        <img :src="verifCode" @click="code"/>
                        <div @click="code">
                            看不清？换一张
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-form-item label=" ">
                <el-button @click="login" type="primary" :loading="loading">
                    {{loading?'登录中':'立即登录'}}
                </el-button>
                <div>
                    <el-link href="/mdiyPage/resetPassword.do" :underline="false" icon="el-icon-warning-outline">忘记密码
                    </el-link>
                    <el-link href="/mdiyPage/register.do" :underline="false" icon="el-icon-user">账号注册</el-link>
                </div>
            </el-form-item>
        </el-form>
    </div>
</div>
</body>
</html>
<!--js位置-start-->
<script>
    var app = new Vue({
        el: '#app',
        watch: {},
        data: {
            loading: false,
            verifCode: ms.base + "/code?t=" + new Date().getTime(),
            saveDisabled: false,
            //表单数据
            form: {
                // 验证码
                rand_code: '',
                // 登录名
                peopleName: '',
                // 登录密码
                peoplePassword: '',
            },
            rules: {
                // 登录名
                peopleName: [{
                    "required": true,
                    "message": "登录名不能为空"
                }, {"pattern": "^[^[!@#$%^&*()_+-/~?！@#￥%…&*（）——+—？》《：“‘’]+$", "message": "登录名格式不匹配"}, {
                    "min": 1,
                    "max": 30,
                    "message": "登录名长度必须为1-30"
                }],
                // 登录密码
                peoplePassword: [{
                    "required": true,
                    "message": "登录密码不能为空"
                }, {"pattern": "^[^[!@#$%^&*()_+-/~?！@#￥%…&*（）——+—？》《：“‘’]+$", "message": "登录密码格式不匹配"}, {
                    "min": 1,
                    "max": 30,
                    "message": "登录密码长度必须为1-30"
                }],

                rand_code: [
                    {required: true, message: '请输入验证码', trigger: 'blur'},
                    {min: 1, max: 4, message: '长度不能超过4个字符', trigger: 'change'}
                ],
            },
        },
        methods: {
            //获取验证码
            code: function () {
                this.verifCode = ms.base + "/code?t=" + new Date().getTime();
            },
            //登录
            login: function () {
                var that = this;
                //表单验证
                that.$refs.form.validate(function (valid) {
                    if (valid) {
                        //更新加载状态
                        that.loading = true;
                        //请求验证接口
                        ms.http.post("/checkLogin.do", that.form).then(function (res) {
                            //成功
                            if (res.result) {
                                that.$notify({
                                    title: '成功',
                                    message: '登录成功',
                                    type: 'success'
                                });
                                //重定向调整地址
                                var url = ms.util.getParameter("url");
                                if (url) {
                                    url = decodeURIComponent(url);
                                    var linkIndex = url.lastIndexOf("link=");
                                    if (linkIndex > 0) {
                                        var link = url.substring(url.lastIndexOf("link=") + 5)
                                        url = decodeURIComponent(link);
                                    }

                                } else {
                                    url = "/people/peopleInfo.do";
                                }
                                window.location.href = url;
                            }
                            //更新加载状态
                            that.loading = false;
                        }).catch(function (err) {
                            that.code();
                            that.loading = false;
                        });
                    }
                });
            }
        },
        created: function () {
            this.code();
        }
    })
</script>
<!--js位置-end-->
<style>
    body {
        background-color: #fff;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Segoe UI", "Helvetica Neue", "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei", 微软雅黑, sans-serif;
        moz-box-sizing: border-box;
        webkit-box-sizing: border-box;
    }

    .login {
        background-image: url('Images/login_bg.png');
        background-size: cover;
        background-repeat: no-repeat;
        padding-right: 0px;
        margin-right: 0px;
        padding-bottom: 0px;
        height: 100%;
        align-items: center;
        justify-content: center;
        margin-left: 0px;
        border-top-left-radius: 0px;
        margin-bottom: 0px;
        padding-left: 0px;
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
        padding-top: 0px;
        background-color: #F4F4F5;
        flex-direction: column;
        display: flex;
        border-bottom-left-radius: 0px;
        width: 100%;
        margin-top: 0px;
    }

    .login .title {
        padding-right: 0px;
        padding-bottom: 0px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 10px;
        padding-left: 0px;
        box-sizing: border-box;
        padding-top: 0px;
        flex-direction: row;
        display: flex;
        width: 400px;
        margin-top: 0px;
    }

    .login .title .logo {
        padding-right: 0px;
        padding-bottom: 0px;
        padding-top: 0px;
        height: 48px;
        width: 48px;
        margin-bottom: 0px;
        padding-left: 0px;
    }

    .login .title .logo-txt {
        margin-right: 0px;
        display: flex;
        margin-left: 0px;
        margin-bottom: 0px;
    }

    .login .tab {
        padding-right: 0px;
        padding-bottom: 0px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 0px;
        padding-left: 0px;
        box-sizing: border-box;
        padding-top: 0px;
        background-color: #FFFFFF;
        flex-direction: row;
        display: flex;
        width: 400px;
        margin-top: 0px;
    }

    .login .tab .sel {
        padding-right: 0px;
        padding-bottom: 0px;
        height: 60px;
        align-items: center;
        text-align: center;
        justify-content: center;
        font-size: 16PX;
        padding-left: 0px;
        cursor: pointer;
        word-wrap: break-word;
        padding-top: 0px;
        flex-direction: column;
        display: flex;
        width: 50%;
    }

    .login .tab .sel:hover {
        flex-direction: row;
    }

    .login .tab .sel {
        flex-direction: row;
    }

    .login .tab .default {
        padding-right: 0px;
        padding-bottom: 0px;
        height: 60px;
        align-items: center;
        text-align: center;
        justify-content: center;
        font-size: 16PX;
        margin-bottom: 0px;
        padding-left: 0px;
        cursor: pointer;
        color: #606266;
        word-wrap: break-word;
        padding-top: 0px;
        background-color: #E9E9EB;
        flex-direction: row;
        display: flex;
        width: 50%;
        margin-top: 0px;
    }

    .login .tab .default:hover {
        color: #303133;
        flex-direction: row;
    }

    .login .from {
        padding-right: 32px;
        margin-right: 0px;
        padding-bottom: 32px;
        align-items: center;
        justify-content: flex-start;
        margin-left: 0px;
        padding-left: 32px;
        padding-top: 32px;
        background-color: #FFFFFF;
        flex-direction: column;
        display: flex;
        width: 400px;
    }

    .login .from>.from-body {
        padding-right: 0px;
        padding-bottom: 0px;
        flex-wrap: wrap;
        height: 400px;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 0px;
        padding-left: 0px;
        box-sizing: border-box;
        padding-top: 0px;
        flex-direction: column;
        display: flex;
        width: 300px;
        margin-top: 0px;
    }

    .login .from>.from-body .input {
        padding-right: 0px;
        padding-bottom: 0px;
        flex-wrap: wrap;
        height: 48px;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 20px;
        padding-left: 0px;
        box-sizing: border-box;
        padding-top: 0px;
        flex-direction: row;
        display: flex;
        width: 100%;
        margin-top: 20px;
    }

    .login .from>.from-body .input>span {
        font-size: 14PX;
        margin-bottom: 0px;
        color: #606266;
        word-wrap: break-word;
        flex-direction: row;
        display: inline-block;
        margin-top: 0px;
    }

    .login .from>.from-body .input>span:hover {
        flex-direction: row;
    }

    .login .from>.from-body .login-button {
        height: 48px;
        align-items: center;
        text-align: center;
        justify-content: center;
        border-top-left-radius: 50px;
        margin-bottom: 0px;
        color: #FFFFFF;
        word-wrap: break-word;
        border-bottom-right-radius: 50px;
        border-top-right-radius: 50px;
        background-color: #409EFF;
        flex-direction: row;
        display: flex;
        border-bottom-left-radius: 50px;
        width: 100%;
        margin-top: 0px;
    }

    .login .from>.from-body .login-button:hover {
        flex-direction: row;
    }

    .login .from>.from-body .links {
        padding-right: 0px;
        padding-bottom: 0px;
        flex-wrap: wrap;
        height: 32px;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;
        padding-left: 0px;
        box-sizing: border-box;
        padding-top: 0px;
        flex-direction: row;
        display: flex;
        width: 100%;
        margin-top: 10px;
    }

    .login .from>.from-body .links span {
        font-size: 14PX;
        margin-bottom: 0px;
        color: #606266;
        word-wrap: break-word;
        flex-direction: row;
        display: inline-block;
        margin-top: 0px;
    }

    .login .from>.from-body .links span:hover {
        flex-direction: row;
    }





    .login .copyright {
        padding-right: 0px;
        padding-bottom: 0px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        padding-left: 0px;
        box-sizing: border-box;
        padding-top: 0px;
        flex-direction: row;
        display: flex;
        width: 400px;
        margin-top: 20px;
    }

    .login .copyright span {
        font-size: 14PX;
        margin-bottom: 0px;
        color: #909399;
        word-wrap: break-word;
        flex-direction: row;
        display: inline-block;
        margin-top: 0px;
    }

    .login .copyright span:hover {
        flex-direction: row;
    }
    .class-20
    {
        cursor:pointer;
        color:#333333;
        outline-offset:-1px;
        height:40px;
        max-width:100%;
        align-items:center;
        flex-direction:row;
        display:flex;
        justify-content:center;
        margin-left:10px;
        animation-duration:1s;
        background-repeat:no-repeat;
    }

    @media (max-width: 768px) {
        .login {
            background-color: #F4F4F5;
            align-items: center;
            flex-direction: column;
            display: flex;
            padding-right: 0px;
            justify-content: center;
            margin-left: 0px;
            border-top-left-radius: 0px;
            margin-right: 0px;
            padding-bottom: 0px;
            border-bottom-left-radius: 0px;
            width: 100%;
            border-bottom-right-radius: 0px;
            border-top-right-radius: 0px;
            margin-bottom: 0px;
            padding-top: 0px;
            padding-left: 0px;
            margin-top: 0px;
            height: 100%;
        }

        .login .title {
            align-items: center;
            flex-direction: row;
            display: flex;
            padding-right: 0px;
            box-sizing: border-box;
            justify-content: flex-start;
            padding-bottom: 0px;
            flex-wrap: wrap;
            width: 80%;
            margin-bottom: 10px;
            padding-top: 0px;
            padding-left: 0px;
            margin-top: 0px;
        }

        .login .title .logo {
            padding-bottom: 0px;
            padding-right: 0px;
            width: 48px;
            margin-bottom: 0px;
            padding-top: 0px;
            padding-left: 0px;
            height: 48px;
        }

        .login .title .logo-txt {
            margin-right: 0px;
            margin-bottom: 0px;
            display: flex;
            margin-left: 0px;
        }

        .login .tab {
            background-color: #FFFFFF;
            align-items: center;
            flex-direction: row;
            display: flex;
            padding-right: 0px;
            box-sizing: border-box;
            justify-content: flex-start;
            padding-bottom: 0px;
            flex-wrap: wrap;
            width: 80%;
            margin-bottom: 0px;
            padding-top: 0px;
            padding-left: 0px;
            margin-top: 0px;
        }

        .login .tab .sel {
            cursor: pointer;
            align-items: center;
            text-align: center;
            flex-direction: column;
            word-wrap: break-word;
            display: flex;
            padding-right: 0px;
            justify-content: center;
            padding-bottom: 0px;
            width: 50%;
            font-size: 16PX;
            padding-top: 0px;
            padding-left: 0px;
            height: 60px;
        }

        .login .tab .default {
            cursor: pointer;
            background-color: #E9E9EB;
            align-items: center;
            color: #606266;
            text-align: center;
            flex-direction: row;
            word-wrap: break-word;
            display: flex;
            padding-right: 0px;
            justify-content: center;
            padding-bottom: 0px;
            width: 50%;
            font-size: 16PX;
            padding-top: 0px;
            padding-left: 0px;
            height: 60px;
        }

        .login .from {
            background-color: #FFFFFF;
            align-items: center;
            flex-direction: column;
            display: flex;
            padding-right: 10px;
            justify-content: flex-start;
            margin-left: 0px;
            margin-right: 0px;
            padding-bottom: 10px;
            width: 80%;
            margin-bottom: 0px;
            padding-top: 10px;
            padding-left: 10px;
            margin-top: 0px;
        }

        .login .from>.from-body {
            align-items: center;
            flex-direction: column;
            display: flex;
            padding-right: 0px;
            box-sizing: border-box;
            justify-content: flex-start;
            padding-bottom: 0px;
            flex-wrap: wrap;
            width: 100%;
            margin-bottom: 0px;
            padding-top: 0px;
            padding-left: 0px;
            margin-top: 0px;
            height: 100%;
        }

        .login .from>.from-body .input {
            align-items: center;
            flex-wrap: wrap;
            flex-direction: row;
            display: flex;
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 20px;
            justify-content: flex-start;
            margin-top: 16px;
            height: 48px;
        }

        .login .from>.from-body .input>span {
            color: #606266;
            flex-direction: row;
            word-wrap: break-word;
            display: inline-block;
            font-size: 14PX;
            margin-bottom: 0px;
            margin-top: 0px;
        }

        .login .from>.from-body .login-button {
            background-color: #409EFF;
            align-items: center;
            color: #FFFFFF;
            text-align: center;
            flex-direction: row;
            word-wrap: break-word;
            display: flex;
            justify-content: center;
            border-top-left-radius: 50px;
            border-bottom-left-radius: 50px;
            width: 100%;
            border-bottom-right-radius: 50px;
            border-top-right-radius: 50px;
            margin-bottom: 0px;
            margin-top: 0px;
            height: 48px;
        }

        .login .from>.from-body .links {
            align-items: center;
            flex-direction: row;
            display: flex;
            padding-right: 0px;
            box-sizing: border-box;
            justify-content: space-between;
            padding-bottom: 0px;
            flex-wrap: wrap;
            width: 100%;
            margin-bottom: 0px;
            padding-top: 0px;
            padding-left: 0px;
            margin-top: 10px;
            height: 32px;
        }

        .login .from>.from-body .links span {
            color: #606266;
            flex-direction: row;
            word-wrap: break-word;
            display: inline-block;
            font-size: 14PX;
            margin-bottom: 0px;
            margin-top: 0px;
        }

        .login .from>.from-weixin {
            align-items: center;
            flex-direction: column;
            display: flex;
            padding-right: 0px;
            box-sizing: border-box;
            justify-content: flex-start;
            padding-bottom: 0px;
            flex-wrap: wrap;
            width: 100%;
            margin-bottom: 0px;
            padding-top: 0px;
            padding-left: 0px;
            margin-top: 0px;
            height: 100%;
        }

        .login .copyright {
            align-items: center;
            flex-direction: row;
            display: flex;
            padding-right: 0px;
            box-sizing: border-box;
            justify-content: center;
            padding-bottom: 0px;
            flex-wrap: wrap;
            width: 80%;
            margin-bottom: 20px;
            padding-top: 0px;
            padding-left: 0px;
            margin-top: 20px;
        }

        .login .copyright span {
            color: #909399;
            text-align: center;
            flex-direction: row;
            word-wrap: break-word;
            display: inline-block;
            font-size: 14PX;
            margin-bottom: 0px;
            margin-top: 0px;
        }

    }
</style>

